<template>
  <div class="container">
    <div class="container__header">
      <Header :currentId="1" />
    </div>
    <div class="container__chart justify-between" v-for="(item,index) in listData" :key="index">
      <div class="container__chart__left">
        <div class="front align-center">
          <img src="@/assets/biaoti@2x.png"/>
          <span class="font18">报警次数:  {{ item.count }}次</span>
          <span class="font18">时间:  {{item.time}}</span>
        </div>
        <div class="container__content__list justify-between">
            <div class="container__content__list__item" v-for="(item, index) in item.userWarningListVoList" :key="index">
              <warning-info :dispose="false" :warnObj="item" :list="warnArr.map(_item => _item.path)"> </warning-info>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  homeStatisticsProcessedAlerts,
} from "@/api/home";
import Header from "@/components/Header.vue";
import WarningInfo from "@/components/WarningInfo.vue";

export default {
  name: "mostOnce",
  components: {
    WarningInfo,
    Header,
  },
  computed: { ...mapGetters(["userId"]) },

  data() {
    return {
      count: '',
      time:'',
      warnArr: [],
      listData: []
    };
  },

  mounted() {
    this.homeStatisticsProcessedAlerts();
  },

  methods: {
    async homeStatisticsProcessedAlerts(){
      let query = {
        startTime:this.$route.params.startTime
      }
      await homeStatisticsProcessedAlerts(query)
          .then((res)=>{
            if (res.code === 200){
              this.listData = res.data;
            }
          })
    },
  }
};
</script>


<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .container__content__list {
    display: flex;
    border-radius: 8px;
    padding: 0 24px;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: left;
  }
  .front {
    .font18 {
      color: #fff;
      font-size: 18px;
      padding-right: 16px;
    }

    img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }
  }

  &__content {
    width: 1888px;
    height: auto;
    border-radius: 8px;
    margin: 16px auto;
    box-sizing: border-box;

    &__opration {
      padding: 0 24px;
      width: 100%;
      height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #303136;
      border-radius: 8px;

      .select-type {
        span {
          padding: 0 24px;
          color: #949ba4;
          font-size: 14px;
        }
      }

      .opration-btn {
        span {
          display: inline-block;
          width: 88px;
          height: 36px;
          line-height: 36px;
          border-radius: 4px;
          cursor: pointer;
        }

        &__reserve {
          border: 1px solid #5cfbff;
          color: #5cfbff;
          margin-right: 24px;
        }

        &__search {
          background-color: #5cfbff;
          color: #17181a;
        }
      }
    }

    &__list {
      margin-top: 16px;
      background: #303136;
      padding-bottom: 24px;

      &__title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #949ba4;
        padding: 28px 24px 0 24px;

        .sort {
          background-color: #212226; //#404249;
          span {
            display: inline-block;
            width: 98px;
            height: 34px;
            text-align: center;
            line-height: 34px;
            cursor: pointer;
          }

          .active {
            background-color: #404249;
          }
        }
      }

      &__box {
        width: 100%;
        height: auto;
        margin-top: 16px;
        padding: 0 24px;
        display: flex;

        &__item {
          width: 216px;
          height: 252px;
          background: #363940;
          border-radius: 4px;
          border: 1px solid #45777a;
          margin-top: 16px;
          margin-right: 16px;
          margin-bottom: 20px;

          img {
            width: 168px;
            height: 168px;
          }

          span {
            color: #fff;
          }
        }
      }

      &__pagination {
        width: 100%;
        margin-top: 24px;
        padding: 0 24px;
        padding-bottom: 20px;
        box-sizing: border-box;
      }
    }
  }

  &__chart {
    width: 1888px;
    margin: 16px auto;

    &__left,
    &__right {
      width: 100%;
      background-color: #303136;
      border-radius: 8px;

      .front {
        width: 100%;
        box-sizing: border-box;
        padding: 28px 0 27px 24px;
      }

      .echart-box {
        width: 100%;
        height: 400px;
      }
    }
  }
  .data-item{
    display: flex;
    margin: 0 25px;
    justify-content: space-between;
    font-size: 16px;
    .frequency{
      font-size: 14px;
      color: #949BA4;
    }
  }
}
</style>
